<template>
	<uni-popup ref="infoPop" type="center">
		<view class="close-top flex justify-end">
			<image src="@/static/svg/icon-close.svg" mode="widthFix" class="icon-close"
				style="width: 60rpx;" @click="showPop(false)"></image>
		</view>
		<view class="info-page">
			<view class="page-bg">
				
			</view>
			<view class="content flex flex-col justify-center item-center">
				<image :src="detail.avatar" mode="" class="detail-image"></image>
				<view class="detail-name">{{detail.merchantShortName}}</view>
				<view class="detail-mcc">类型:{{detail.mccName}}</view>
				<view class="detail-link">联系人：{{detail.contactName}}/{{detail.contactMobileNo}}</view>
				<view class="detail-dec">
					<view class="detail-dec-item flex justify-between">
						<text>在售商品数</text>
						<text class="detail-count">{{detail.saleGoodsCount}}</text>
					</view>
					<view class="detail-dec-item flex justify-between">
						<text>本月销售额</text>
						<text class="detail-count">{{detail.monthOrderAmt}}</text>
					</view>
					<view class="detail-dec-item flex justify-between">
						<text>本月订单数</text>
						<text class="detail-count">{{detail.monthOrderCount}}</text>
					</view>
					<view class="detail-dec-item flex justify-between">
						<text>本月补贴金额</text>
						<text class="detail-count">{{detail.monthSubsidyAmt}}</text>
					</view>
					<view class="detail-dec-item flex justify-between">
						<text>累计销售额</text>
						<text class="detail-count">{{detail.totalOrderAmt}}</text>
					</view>
					<view class="detail-dec-item flex justify-between">
						<text>累计订单数</text>
						<text class="detail-count">{{detail.totalOrderCount}}</text>
					</view>
					<view class="detail-dec-item flex justify-between">
						<text>累计补贴金额</text>
						<text class="detail-count">{{detail.totalSubsidyAmt}}</text>
					</view>
				</view>
			</view>
			
		</view>
	</uni-popup>	
</template>

<script setup>
	import {
		watch,
		ref,
		getCurrentInstance,
		defineEmits
	} from 'vue'
	import {getDetailById} from '../../api/merchant.js'
	const infoPop = ref()
	const detail = ref({})
	const __init =  async (id) => {
		let result = await getDetailById({id:id})
		if(result){
			detail.value = result
		}
	}
	const showPop = (value,id) => {
		if (value) {
			if(id){
				__init(id)
			}
			infoPop.value && infoPop.value.open('center')
			
		} else {
			infoPop.value && infoPop.value.close()
		}
	}
	defineExpose({
		showPop
	})
</script>

<style lang="scss" scoped>
	.close-top{
		width: 100%;
		margin-bottom: 10px;
	}
	.content{
		position: relative;
	}
	.info-page{
		width: 700rpx;
		// height: 541px;
		border-radius: 8px;
		padding: 40rpx 0;
		background-color: #ffffff;
		position: relative;
		// background: linear-gradient(135deg, #FA4543 -55%, #FFCFCE -55%, #FFFFFF 99.9%);
	}
	.page-bg {
		z-index: 0;
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		background-image: radial-gradient(circle at left top, #D8230A26 50%, transparent 50%);
		background-size: 700rpx 700rpx;
		background-repeat: no-repeat;
		filter: blur(50px);
	}
	.detail-image{
		width: 176rpx;
		height: 176rpx;
		border-radius: 12px;
		margin-bottom: 10px;
	}
	.detail-name{
		font-family: PingFang SC;
		font-size: 48rpx;
		font-weight: 600;
		line-height: 48rpx;
		text-align: center;
		color: rgba(51, 51, 51, 1);
		margin-bottom: 20rpx;
	}
	.detail-mcc{
		font-family: PingFang SC;
		font-size: 28rpx;
		font-weight: 400;
		line-height: 40rpx;
		letter-spacing: 0px;
		text-align: center;
		color: rgba(51, 51, 51, 1);
		margin-bottom: 4px;
	}
	.detail-link{
		font-family: PingFang SC;
		font-size: 24rpx;
		font-weight: 400;
		line-height: 40rpx;
		letter-spacing: 0px;
		text-align: center;
		color: rgba(102, 102, 102, 1);
		margin-bottom: 28rpx;
	}
	.detail-dec{
		width: 600rpx;
		padding: 12px 16px;
		border-radius: 8px;
		box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.15);
		background: rgba(255, 255, 255, 1);
		.detail-dec-item{
			font-family: PingFang SC;
			font-size: 28rpx;
			font-weight: 400;
			line-height: 40rpx;
			letter-spacing: 0px;
			text-align: left;
			color: rgba(51, 51, 51, 0.6);
			height: 60rpx;
			line-height: 60rpx;
		}
		.detail-count{
			color: rgba(51, 51, 51, 1);
		}
	}
</style>